import React, { useEffect, useState } from 'react';
import styles from './index.less';
import login_img_bg1 from '@/common/img/login_img_bg1.png';
import login_img_bg2 from '@/common/img/login_img_bg2.png';
import login_icon_tlgb from '@/common/img/login_icon_tlgb.png';
import img_jbt from '@/common/img/img_jbt.png';
import { Form, Button, Input, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import md5 from 'md5';
import api from '../../http/api';
const Login = (props: any) => {
  const [userInfo, setUserInfo] = useState({
    loginName: '',
    loginPwd: '',
  });
  const onFinish = async (v: any) => {
    const loginParent = props.loginParent;
    api
      .login({
        userName: v.username,
        password: md5(v.password),
      })
      .then(res => {
        if (res) {
          sessionStorage.info = JSON.stringify(res.data);
          const { menu } = res.data;
          if (menu.length) {
            sessionStorage.menuKey = menu[0].childMenu[0].title;
            sessionStorage.menuOpenKey = menu[0].title;
          } else {
            sessionStorage.menuKey = '';
            sessionStorage.menuOpenKey = '';
          }
          loginParent.history.push(
            menu.length ? menu[0].childMenu[0].path : '',
          );
        }
      });
  };
  useEffect(() => {});
  return (
    <div className={styles.login}>
      <div className={styles.loginTitle}>欢迎登录</div>
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={onFinish}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <Input
            size="large"
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="输入用户名"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入密码' }]}
        >
          <Input
            size="large"
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="输入密码"
          />
        </Form.Item>
        <Form.Item>
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>记住信息</Checkbox>
          </Form.Item>
        </Form.Item>

        <Form.Item>
          <Button
            style={{ width: '100%' }}
            type="primary"
            htmlType="submit"
            className="login-form-button"
          >
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default (props: any) => {
  console.log(md5('hkxygc@2021'));
  return (
    <div
      className={styles.loginWrap}
      style={{ backgroundImage: `url(${login_img_bg2}) ` }}
    >
      <img className={styles.login_img_bg1} src={login_img_bg1} alt="" />
      <div className={styles.logo}>
        {/* <img src={img_jbt} alt=""/>
            <div></div>
            <img src={login_icon_tlgb} alt=""/> */}
        <div>U你校园综合信息化管理平台</div>
      </div>
      <div className={styles.welcome}>Welcome to login！</div>
      <Login loginParent={props} />
      <div className={styles.btmIntro}>
        主体：湖北中柠文化传媒有限公司 | 备案号：
        <a href="https://beian.miit.gov.cn/" target="_blank">
          鄂ICP备2020022837号-1
        </a>
      </div>
    </div>
  );
};
